<template>
	<el-form ref="loginFormRef" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login(loginFormRef)">
		<el-form-item prop="username">
			<el-input v-model="form.username" prefix-icon="el-icon-user" clearable :placeholder="$t('login.user')"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.password')"></el-input>
		</el-form-item>
		<el-form-item>
			<el-col :span="12">
				<el-checkbox :label="$t('login.remember')" v-model="form.autologin"></el-checkbox>
			</el-col>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" style="width: 100%" :loading="islogin" round @click="login(loginFormRef)">
				{{ $t('login.enter') }}
			</el-button>
		</el-form-item>
	</el-form>
	<sc-verify ref="verifyRef" :tipWords="tipWords" :passFlag="passFlag" @onSuccess="success" @onFail="fail"></sc-verify>
</template>
<script setup lang="ts">
	import type { FormInstance, FormRules } from 'element-plus'
	// 定义表单数据的类型
	interface RuleForm {
		username: string
		password: string
		autologin: boolean
		captcha?: number
	}
	// 定义登录请求的数据结构
	interface Data {
		username: string
		password: string
		expires: number
		captcha?: number
	}
	// 使用系统状态管理
	const systemStore = useSystemStore()
	// 获取路由实例
	const router = useRouter()
	// 表单实例引用
	const loginFormRef = ref<FormInstance>()
	// 验证组件引用
	const verifyRef = ref()
	// 登录状态标志
	const islogin = ref(false)
	// 验证通过标志
	const passFlag = ref(false)
	// 登录表单对象
	const form = reactive<RuleForm>({
		username: '',
		password: '',
		autologin: false
	})
	// 提示信息
	const tipWords = ref('')
	// 表单验证规则
	const rules = reactive<FormRules<RuleForm>>({
		username: [{ required: true, message: lang.global.t('login.userError'), trigger: 'blur' }],
		password: [{ required: true, message: lang.global.t('login.passwordError'), trigger: 'blur' }]
	})
	// 验证成功处理函数
	const success = (times: number) => {
		passFlag.value = true
		tipWords.value = lang.global.t('login.vs', { time: (times / 1000).toFixed(1) })
		// 调用登录处理函数
		handleLogin()
	}
	// 验证失败处理函数
	const fail = () => {
		passFlag.value = false
		tipWords.value = lang.global.t('login.vf')
		// 一秒后清空提示
		setTimeout(() => {
			tipWords.value = ''
		}, 1000)
	}
	// 登录函数
	const login = (formEl: FormInstance | undefined) => {
		if (islogin.value || !formEl) return
		formEl.validate((valid) => {
			if (valid) {
				// 若需要验证码则打开验证码组件
				if (systemStore.login.is_captcha) {
					verifyRef.value.open()
				} else {
					// 否则直接调用登录处理
					handleLogin()
				}
			}
		})
	}
	// 处理登录逻辑
	const handleLogin = async () => {
		// 设置登录状态为正在登录
		islogin.value = true
		// 设置登陆数据
		var data: Data = {
			username: form.username,
			password: form.password,
			expires: form.autologin ? 24 * 60 * 60 : 60 * 60
		}
		// 如果打开验证码则添加 captcha 字段
		if (systemStore.login.is_captcha) {
			data.captcha = 1
		}
		// 发送登录请求
		const user = await api.auth.token.post(data)
		if (user.code === 200) {
			// 登录成功后设置 cookie
			tool.cookie.set('token', user.data.token, { expires: data.expires })
			// 保存用户信息
			tool.data.set('USER', user.data, data.expires)
		} else {
			// 登录失败，重置状态
			islogin.value = false
			// 显示错误信息
			ElMessage.warning(user.message)
			return false
		}
		// 获取菜单权限
		const menu = await api.auth.menus.get()
		if (menu.code === 200) {
			// 没有菜单权限，重置状态并弹出错误提示
			if (menu.data.menu.length == 0) {
				islogin.value = false
				ElMessageBox.alert(lang.global.t('login.unauthorized'), lang.global.t('common.unauthorized'), {
					type: 'error',
					center: true
				})
				return false
			}
			// 存储菜单和权限数据
			tool.data.set('MENU', menu.data.menu, data.expires)
			tool.data.set('PERMISSIONS', menu.data.permissions, data.expires)
			tool.data.set('DASHBOARDGRID', menu.data.dashboardGrid, data.expires)
		} else {
			// 获取菜单失败，重置状态
			islogin.value = false
			// 显示错误信息
			ElMessage.warning(menu.message)
			// 移除 token
			tool.cookie.remove('token')
			// 移除用户信息
			tool.data.remove('USER')
			return false
		}
		// 登录成功后跳转到首页
		router.replace({ path: '/' })
		// 显示成功信息
		ElMessage.success(user.message)
		// 重置登录状态
		islogin.value = false
	}
</script>
